<template>
  <div>
    <div class="shopcart">
      <div class="content" @click="toggleList">
        <div class="content-left">
          <div class="logo-wrapper">
            <div class="logo" :class="{'highlight':totalCount>0}">
              <i class="iconfont cart" :class="{'highlight':totalCount>0}">&#xe613;</i>
            </div>
            <div class="num" v-show="totalCount>0">{{totalCount}}</div>
          </div>
          <div class="price" :class="{'highlight':totalPrice>0}">￥{{totalPrice}}</div>
          <div class="desc">另需配送费￥{{seller.deliveryPrice}}元</div>
        </div>
        <div class="content-right" :class="{'enough':payClass}" @click.stop.prevent="pay">
          <div class="pay">{{payDesc}}</div>
        </div>
      </div>
      <transition name="fold">
        <div class="shopcart-list" v-show="showList">
          <div class="list-header border-bottom">
            <h1 class="title">购物车</h1>
            <span class="empty" @click="empty">清空</span>
          </div>
          <div class="list-content" ref="listcontent">
            <ul>
              <li class="food border-bottom" v-for="food of selectFoods">
                <span class="name">{{food.name}}</span>
                <div class="price">
                  <span>￥{{food.price*food.count}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cart-control :food="food"></cart-control>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <transition name="show">
      <div class="list-mask" v-show="showList"></div>
    </transition>
  </div>

</template>

<script>
import CartControl from '../cartcontrol/CartControl'
import Bscroll from 'better-scroll'
export default {
  name: 'ShopCart',
  props: {
    selectFoods: {
      type: Array,
      default () {
        return []
      }
    },
    seller: Object

  },
  data () {
    return {
      showList: false
      // fold: true
    }
  },
  components: {
    CartControl
  },
  computed: {
    totalPrice () {
      let total = 0
      this.selectFoods.forEach((food) => {
        total += food.price * food.count
      })
      return total
    },
    totalCount () {
      let count = 0
      this.selectFoods.forEach((food) => {
        count += food.count
      })
      return count
    },
    payDesc () {
      if (this.totalPrice === 0) {
        return `￥${this.seller.minPrice}起送`
      } else if (this.totalPrice < this.seller.minPrice) {
        let diff = this.seller.minPrice - this.totalPrice
        return `还差￥${diff}起送`
      } else {
        return '去结算'
      }
    },
    payClass () {
      if (this.totalPrice >= this.seller.minPrice) {
        return 'enough'
      }
    },
    // showList () {
    //   if (!this.totalCount) {
    //     this.fold = true
    //     return false
    //   }
    //   let show = !this.fold
    //   return show
    // }
  },
  methods: {
    toggleList () {
      if (!this.totalCount) {
        this.showList = false
        return
      } else {
        this.showList = !this.showList
      }
    },
        // this.fold = !this.fold

    empty () {
      this.selectFoods.forEach((food) => {
        food.count = 0
      })
    },
    pay () {
      if (this.totalPrice < this.seller.minPrice) {
        return
      }
      window.alert(`支付${this.totalPrice}`)
    }
    // beforeEnter:function (el) {
    //   el.style.transform = "translate3d(0,0,0)"
    // },
    // enter:function (el,done) {
    //   el.offsetWidth
    //   el.style.transform="translate3d(0,-100%,0)"
    //   el.style.transition="all 1s";
    //   done()
    // },
    // afterEnter:function (el) {
    //   el.style.transform = "translate3d(0,0,0)"
    // }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.listcontent, {
      click: true
    })
  }
}
</script>

<style lang="stylus" scoped>
  .shopcart
    position fixed
    width 100%
    height 48px
    z-index 50
    left 0
    bottom 0
    .content
      display flex
      .content-left
        flex 1
        height 48px
        background #141d27
        .logo-wrapper
          position relative
          display inline-block
          vertical-align top
          top -10px
          width 56px
          height 56px
          line-height 56px
          border-radius 50%
          margin 0 12px
          padding 6px
          box-sizing border-box
          background: #141d27
          .logo
            width 100%
            height 100%
            line-height 44px
            box-sizing border-box
            border-radius 50%
            background: #2b343c
            text-align center
            font-weight 700
            &.highlight
              background rgb(0,160,220)
            .cart
              font-size 24px
              color rgba(255,255,255,0.4)
              line-height 44px
              vertical-align middle
              &.highlight
                color #fff
          .num
            position absolute
            width 24px
            height 16px
            line-height 16px
            text-align center
            font-size 9px
            font-weight 700
            border-radius 16px
            box-shadow 0 4px 8px 0 rgba(0,0,0,0.4)
            background red
            right 0
            top 0
            color #fff
        .price
          display inline-block
          vertical-align top
          margin-top 12px
          padding-right 12px
          box-sizing border-box
          font-size 16px
          font-weight 700
          line-height 24px
          color rgba(255,255,255,0.4)
          border-right 1px solid rgba(255,255,255,0.1)
          &.highlight
            color #fff
        .desc
          display inline-block
          vertical-align top
          margin 12px 0 0 12px
          color rgba(255,255,255,0.4)
          font-size 10px
          font-weight 200
          line-height 24px
      .content-right
        flex 0 0 105px
        width 105px
        height 48px
        line-height 48px
        font-size 12px
        font-weight 700
        color rgba(255,255,255,0.4)
        background #2b343c
        text-align center
        &.enough
          background #00b43c
          color #fff
    .shopcart-list
      position absolute
      left 0
      bottom 200px
      /*top 0*/
      width 100%
      z-index -1
      /*&.fold-enter-active,&.fold-leave-active
        transition all 0.5s
        transform translate3d(0,-100%,0)
      &.fold-enter,&.fold-leave-to
        transform translate3d(0,0,0)*/
      .list-header
        height 40px
        line-height 40px
        padding 0 18px
        background #f3f5f7
        .title
          font-size 14px
          font-weight 200
          float left
          color rgb(7,17,27)
        .empty
          font-size 12px
          color rgb(0,160,220)
          float right
      .list-content
        /*position absolute*/
        padding 0 18px
        max-height 217px
        background #ffffff
        overflow hidden
        .food
          position relative
          padding 12px 0
          box-sizing border-box
          .name
            font-size 14px
            line-height 24px
            color rgb(7,17,27)
          .price
            position absolute
            right 90px
            bottom 12px
            font-size 10px
            line-height 24px
            font-weight 700
            color red
          .cartcontrol-wrapper
            position absolute
            right 0
            bottom 6px

  .list-mask
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    z-index 40
    background rgba(7,17,27,0.6)
    /*&.show-enter-active,&.show-leave-active
      transition all 0.5s
      opacity 1
      background rgba(7,17,27,0.6)
    &.show-enter,&.show-leave-to
      opacity 0
      background rgba(7,17,27,0)*/
</style>
